<template>
    <el-row>
        <el-col :span="5">
            <el-text>权限名称  </el-text>
            <el-input type="primary" v-model="search.PermissionName" style="width: 180px;"/>
        </el-col>
        <el-col :span="3"> 
          <el-button type="primary" @click="SelectData">查询</el-button>
        </el-col>
    </el-row>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="permissionId" label="权限id" width="180" />
      <el-table-column prop="permissionName" label="权限名称" width="180" />
      <el-table-column prop="parentName" label="父级权限" width="180" />
      <el-table-column prop="routePath" label="路由path" width="180" />
      <el-table-column prop="routeName" label="路由name" width="180" />
      <el-table-column prop="routeView" label="路由view" width="180" />
      <el-table-column prop="state" label="状态" width="180" >
        <template #default="{row}">
          <el-tag
      :type="row.state?'success':'danger'"
      effect="dark"
    >
      {{ row.state?"启用":"禁用" }}
    </el-tag>
        </template>
        </el-table-column>
      
      <el-table-column label="操作" >
        <template #default="{row}">
          <el-tag
          size="large"
      :type="row.state?'danger':'success'"
      effect="dark"
      @click="upState(row.permissionId)"
    >
      {{ row.state?"禁用":"启用" }}
    </el-tag>
          <el-button type="success" @click="editPer(row.permissionId)">修改</el-button>
          <el-button type="danger" @click="delPer(row.permissionId)">删除</el-button>
        </template>
        </el-table-column>
    </el-table>
    <table>
      <tr>
        <td>
          <el-pagination
      v-model:current-page="page.PageIndex"
      v-model:page-size="page.PageSize"
      :page-sizes="[1, 2, 3, 4]"
      :background="true"
      layout="slot, sizes"
      :total="page.totalCount"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    >
    共{{ page.totalCount }}条数据,每页{{ page.PageSize }}条数据
    第{{ page.PageIndex }}/{{ page.totalPage }}页
    </el-pagination>
        </td>
        <td>
          <el-pagination
      v-model:current-page="page.PageIndex"
      v-model:page-size="page.PageSize"
      :page-sizes="[1, 2, 3, 4]"
      :background="true"
      layout="slot, prev, pager, next"
      :total="page.totalCount"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      prev-text="上一页"
      next-text="下一页"
    >
    <el-button type="primary" @click="handleCurrentChange(1)" :disabled="page.PageIndex==1">
      首页
    </el-button>
    </el-pagination>
        </td>
        <td>
          <el-pagination
      v-model:current-page="page.PageIndex"
      v-model:page-size="page.PageSize"
      :page-sizes="[1, 2, 3, 4]"
      :background="true"
      layout="slot, jumper"
      :total="page.totalCount"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    >
    <el-button type="primary" @click="handleCurrentChange(page.totalPage)" :disabled="page.PageIndex==page.totalPage">
      尾页
    </el-button>
    </el-pagination>
        </td>
      </tr>
    </table>
  </template>
  
  <script lang="ts" setup>
import axios from 'axios'
 import { onMounted, reactive, ref } from 'vue'
  import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
  import { ElMessage,ElMessageBox  } from 'element-plus'
  import { useGoodStore } from '@/stores/counter'
  const useStore=useGoodStore();
  import {useRouter} from 'vue-router'
  const router=useRouter();
  
  const upState=(pid:number)=>{
    axios.get('/api/User/PermissionState',{
      params:{
        pid:pid
      }
    })
    .then(res=>{
      if(res.data.isSuc)
        {
          ElMessage.success(res.data.msg);
          loadData();
        }
        else
        {
          ElMessage.error(res.data.msg);
        }
    })
  }

  const editPer=(pid:number)=>{
    router.push('/editPermission');
    useStore.pid=pid;
  }


  const delPer=(pid:number)=>{
    ElMessageBox.confirm(
    '确定删除吗?',
    'Warning',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      axios.delete('/api/User/PermissionDel',{
        params:{
          pid:pid
        }
      })
      .then(res=>{
        if(res.data.isSuc)
        {
          ElMessage.success(res.data.msg);
          page.PageIndex=1;
          loadData();
        }
        else
        {
          ElMessage.error(res.data.msg);
        }
      })
    })
  }


  const handleSizeChange = (val: number) => {
  page.PageSize=val;
  loadData();
}
const handleCurrentChange = (val: number) => {
  page.PageIndex=val;
  loadData();
}

  interface Permission {
    permissionId: number,
    permissionName: string,
  parentId: number,
  routePath: string,
  routeName: string,
  routeView: string,
  state: true,
  parentName: string
  }
  const tableData = ref<Permission[]>([])
  const page=reactive({
    PageIndex:1,
    PageSize:2,
    totalCount:0,
    totalPage:0
  })
  const search=reactive({
    PermissionName:""
  });
  onMounted(()=>{
    loadData();
  })
  const loadData=()=>{
    axios.get('/api/User/PermissionByPage',{
      params:{
        PageIndex:page.PageIndex,
        PageSize:page.PageSize,
        PermissionName:search.PermissionName
      }
    })
    .then(res=>{
      tableData.value=res.data.data.data;
      page.totalCount=res.data.data.totalCount;
      page.totalPage=res.data.data.totalPage;
    })
  }
  const SelectData=()=>{
    page.PageIndex=1;
    loadData();
  }

  </script>
  